import React from 'react';
import '../../static/topic/newTopic.styl'
import {withRouter} from 'react-router-dom'
import axios from 'axios'
import {Form, Input, Row, Col, Checkbox, Button, DatePicker, Radio, message, TimePicker} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

const format = 'HH:mm:ss';

@withRouter
class TopicForm extends React.Component {
  state = {
    value: 1
  };

  // 页面跳转
  goRouter(d) {
    this.props.history.push(d)
  };

  //格式化日起
  format = (str) => {
    return moment(str, 'YYYY-MM-DD HH:mm:ss');
  };
  // 点击保存按钮触发事件
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        let add = await
          axios.post('vrv-monitor-platform-web/topic/add', {
            home: values.showHome,
            topicName: values.title,
            carrier: values.carrier.toString(),
            monitorStartTime: this.format(values.startdate.format('YYYY-MM-DD') + ' ' + values.starttime.format('HH:mm:ss')),
            monitorEndTime: this.format(values.enddate.format('YYYY-MM-DD') + ' ' + values.endtime.format('HH:mm:ss')),
            distKeyword: values.distKeyword,
            nameKeyword: values.nameKeyword,
            eventKeyword: values.eventKeyword,
            excludeKeyword: values.excludeKeyword,
            scope: values.scope,
          });
        if (add.data.statusCode === 200) {
          message.success('添加成功');
          localStorage.clear();
          this.props.history.push('/topic')
        } else {
          message.error(add.data.message);
        }
      }
    });
  };

  render() {
    const {getFieldDecorator} = this.props.form;

    const formItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 15, offset: 1},
    };
    const tailFormItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 15, offset: 4},
    };
    const plainOptions = [{label: '新闻', value: '0'},
      {label: '论坛', value: '1'},
      {label: '微博', value: '2'},
      {label: '博客', value: '5'},
      {label: '贴吧', value: '6'},
      {label: '其他', value: '4'},
      {label: 'Twitter', value: '9'},
      {label: '微信', value: '10'},
      {label: '平面媒体', value: '3'}];
    const range = [{label: '全国', value: '-1'},
      {label: '本地', value: '1'},
      {label: '境外', value: '3'},
      {label: '境内外全部', value: '4'}];
    return (
      <div className="createTopic">
        <div className="subjectTitle">新建专题</div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="是否展示在首页"
          >
            {getFieldDecorator('showHome', {
              rules: [{required: true, message: '请选择是否添加至首页',}],
            })(
              <RadioGroup>
                <Radio value={1}>是</Radio>
                <Radio value={0}>否</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="专题名称"
          >
            {getFieldDecorator('title', {
              rules: [{required: true, message: '请输入专题名称',}],
            })(
              <Input style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            label="监测时间"
            {...formItemLayout}
          >
            <Col span={6} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('startdate', {
                  rules: [{type: 'object', required: true, message: '请选择开始日期'}],
                })(
                  <DatePicker format={dateFormat}/>
                )}
              </FormItem>
            </Col>
            <Col span={5} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('starttime', {
                  rules: [{type: 'object', required: true, message: '请选择开始时间'}],
                })(
                  <TimePicker format={format}/>
                )}
              </FormItem>
            </Col>
            <Col span={1}>
              To
            </Col>
            <Col span={6} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('enddate', {
                  rules: [{type: 'object', required: true, message: '请选择结束日期'}],
                })(
                  <DatePicker format={dateFormat}/>
                )}
              </FormItem>
            </Col>
            <Col span={4}>
              <FormItem label={``}>
                {getFieldDecorator('endtime', {
                  rules: [{type: 'object', required: true, message: '请选择结束时间'}],
                })(
                  <TimePicker format={format}/>
                )}
              </FormItem>
            </Col>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="载体类型"
          >
            {getFieldDecorator('carrier', {
              rules: [{
                required: true, message: '请选择监测载体',
              }],
            })(
              <CheckboxGroup options={plainOptions}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="检测范围"
          >
            {getFieldDecorator('scope', {
              rules: [{
                required: true, message: '请选择监测范围',
              }],
            })(
              <RadioGroup options={range}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="地域词"
          >
            {getFieldDecorator('distKeyword', {
              rules: [{
                required: true, message: '请输入地域词',
              }],
            })(
              <Input placeholder="请输入地域词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="主体词"
          >
            {getFieldDecorator('nameKeyword', {
              rules: [{
                required: true, message: '请输入主体词',
              }],
            })(
              <Input placeholder="请输入主体词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="事件词"
          >
            {getFieldDecorator('eventKeyword')(
              <Input placeholder="请输入事件词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="排除关键词"
          >
            {getFieldDecorator('excludeKeyword')(
              <Input placeholder="请输入排除关键词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit" style={{marginRight: '30px'}}>保存</Button>
            <Button onClick={() => (this.goRouter('/topic'))}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const NewTopic = Form.create()(TopicForm);
export default NewTopic;